<template>
  <div class="rights-setting">
    <el-form label-width="120px">
      <el-form-item label="权益海报:">
        <div class="upload-box">
          <el-form label-width="80px">
            <el-form-item label="上传图片:">
              <el-upload
                action="http://ddsc.izhixiu.cn/api/common/upload"
                name="photo"
                list-type="picture-card"
                :file-list="fileList"
                :on-preview="handleCoverPreview"
                :on-remove="handleCoverRemove"
                :on-success="hanldeCoverSuccess"
                :limit="1"
              >
                <i class="el-icon-plus" />
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt>
              </el-dialog>
            </el-form-item>
          </el-form>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { editPoster, getPosterDetail } from '@/api/http/designer'
const ERR_OK = 200
export default {
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: '',
      form: {
        img: ''
      },
      fileList: []
    }
  },
  created() {
    this._getPosterDetail()
  },
  methods: {
    handleCoverPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleCoverRemove(file, fileList) {
      this.dialogImageUrl = ''
      this.form.img = ''
    },
    hanldeCoverSuccess(response, file, fileList) {
      if (response.code === ERR_OK) {
        this.form.img = response.data.photo
      }
    },
    submit() {
      if (!this.form.img) {
        this.$message({
          message: '请上传权益海报',
          showClose: true,
          type: 'warning'
        })
        return
      }
      this._editPoster(this.form.img)
    },
    _editPoster(img) {
      editPoster(img)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: '上传成功',
              showClose: true,
              type: 'success'
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getPosterDetail() {
      getPosterDetail()
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.form.img = res.data.poster
            this.fileList = [{ name: res.data.poster.split('com/')[1], url: res.data.poster }]
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
.upload-box {
  width: 450px;
  height: 337px;
  background-color: rgba(250, 250, 250, 1);
  border: 1px solid rgba(235, 238, 245, 1);
  padding: 30px;
  box-sizing: border-box;
}
/deep/ .el-upload-list__item img{
  object-fit: contain;
  height: 600px;
}
</style>
